<template>
    <div>
        <van-nav-bar title="分类" />
        <van-tree-select  height="100vh" :items="items" :main-active-index.sync="active">
            <template #content>
                <div class="category" v-if="active==index" v-for="(item,index) in category" :key="item.id">
                    <ul v-for="sub in item.childlist" :key="sub.id">
                        <p class="title">{{ sub.name }}</p><br/>
                        <li v-for="child in sub.childlist" :key="child.id" @click="handleCategory(child.id)">
                            <img :src="child.image" alt="">
                            <p>{{ child.name }}</p>
                        </li>
                    </ul>
                </div>
            </template>
        </van-tree-select>
    </div>
</template>
<script>
import {getCategorys} from "@/api/category"
export default {
   data() {
      return {
        active: 0,
        items: [],
        category:[]
      }
   },
   created(){
        getCategorys().then(res=>{
            res.data.data.forEach(item=>{
                this.items.push({text:item.name})
            })
            this.category = res.data.data;
        })
        
   },
   computed:{
    title(){
        return this.items[this.active].text;
    }
   },
   methods:{
    handleCategory(id){
        this.$router.push({path:"/product/list",query:{cat_id:id}})
    }
   },
}
</script>
<style scoped>
    div{
        overflow: hidden;
    }
    .category{
        width: 80%;
        height: 100%;
    }
    .category ul {
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        align-items: center;
        background-color: #fff;
        margin: 10px auto;
        border-radius: 5px;
    }
    .category ul .title{
        width: 100%;
        height: 40px;
    }
    .category ul li{
        height: 98px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        margin-right: 10px;
    }
    .category ul li img{
        width: 50px;
        height: 50px;
    }
    .van-tree-select /deep/ .van-tree-select__content{
        background-color: #f8f8f8;
    }
</style>
